<template>
  <div class="settings-management">
    <el-tabs v-model="activeTab">
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <el-form
          ref="basicFormRef"
          :model="basicForm"
          :rules="basicRules"
          label-width="120px"
        >
          <el-form-item label="系统名称" prop="systemName">
            <el-input v-model="basicForm.systemName" />
          </el-form-item>
          <el-form-item label="系统Logo">
            <el-upload
              class="logo-uploader"
              action="/api/upload"
              :show-file-list="false"
              :on-success="handleLogoSuccess"
              :before-upload="beforeLogoUpload"
            >
              <img v-if="basicForm.logo" :src="basicForm.logo" class="logo" />
              <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="系统描述" prop="description">
            <el-input
              v-model="basicForm.description"
              type="textarea"
              :rows="4"
            />
          </el-form-item>
          <el-form-item label="备案信息" prop="icp">
            <el-input v-model="basicForm.icp" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleBasicSubmit">保存设置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 邮件设置 -->
      <el-tab-pane label="邮件设置" name="email">
        <el-form
          ref="emailFormRef"
          :model="emailForm"
          :rules="emailRules"
          label-width="120px"
        >
          <el-form-item label="SMTP服务器" prop="smtpServer">
            <el-input v-model="emailForm.smtpServer" />
          </el-form-item>
          <el-form-item label="SMTP端口" prop="smtpPort">
            <el-input-number v-model="emailForm.smtpPort" :min="1" :max="65535" />
          </el-form-item>
          <el-form-item label="发件人邮箱" prop="senderEmail">
            <el-input v-model="emailForm.senderEmail" />
          </el-form-item>
          <el-form-item label="发件人名称" prop="senderName">
            <el-input v-model="emailForm.senderName" />
          </el-form-item>
          <el-form-item label="邮箱密码" prop="password">
            <el-input v-model="emailForm.password" type="password" show-password />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleEmailSubmit">保存设置</el-button>
            <el-button type="success" @click="handleTestEmail">发送测试邮件</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 支付设置 -->
      <el-tab-pane label="支付设置" name="payment">
        <el-form
          ref="paymentFormRef"
          :model="paymentForm"
          :rules="paymentRules"
          label-width="120px"
        >
          <el-form-item label="支付宝配置">
            <el-card class="payment-card">
              <template #header>
                <div class="card-header">
                  <span>支付宝</span>
                  <el-switch v-model="paymentForm.alipayEnabled" />
                </div>
              </template>
              <el-form-item label="AppID" prop="alipayAppId">
                <el-input v-model="paymentForm.alipayAppId" />
              </el-form-item>
              <el-form-item label="私钥" prop="alipayPrivateKey">
                <el-input
                  v-model="paymentForm.alipayPrivateKey"
                  type="textarea"
                  :rows="4"
                />
              </el-form-item>
              <el-form-item label="公钥" prop="alipayPublicKey">
                <el-input
                  v-model="paymentForm.alipayPublicKey"
                  type="textarea"
                  :rows="4"
                />
              </el-form-item>
            </el-card>
          </el-form-item>

          <el-form-item label="微信支付配置">
            <el-card class="payment-card">
              <template #header>
                <div class="card-header">
                  <span>微信支付</span>
                  <el-switch v-model="paymentForm.wechatEnabled" />
                </div>
              </template>
              <el-form-item label="商户号" prop="wechatMchId">
                <el-input v-model="paymentForm.wechatMchId" />
              </el-form-item>
              <el-form-item label="商户密钥" prop="wechatMchKey">
                <el-input
                  v-model="paymentForm.wechatMchKey"
                  type="password"
                  show-password
                />
              </el-form-item>
              <el-form-item label="AppID" prop="wechatAppId">
                <el-input v-model="paymentForm.wechatAppId" />
              </el-form-item>
            </el-card>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handlePaymentSubmit">保存设置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 其他设置 -->
      <el-tab-pane label="其他设置" name="other">
        <el-form
          ref="otherFormRef"
          :model="otherForm"
          label-width="120px"
        >
          <el-form-item label="注册设置">
            <el-switch
              v-model="otherForm.enableRegister"
              active-text="开放注册"
              inactive-text="关闭注册"
            />
          </el-form-item>
          <el-form-item label="评论设置">
            <el-switch
              v-model="otherForm.enableComment"
              active-text="允许评论"
              inactive-text="禁止评论"
            />
          </el-form-item>
          <el-form-item label="维护模式">
            <el-switch
              v-model="otherForm.maintenanceMode"
              active-text="开启"
              inactive-text="关闭"
            />
          </el-form-item>
          <el-form-item label="维护说明" v-if="otherForm.maintenanceMode">
            <el-input
              v-model="otherForm.maintenanceMessage"
              type="textarea"
              :rows="4"
              placeholder="请输入系统维护说明"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleOtherSubmit">保存设置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'AdminSettingsManagement',
  components: {
    Plus
  },
  setup() {
    const activeTab = ref('basic')
    
    // 基本设置表单
    const basicFormRef = ref(null)
    const basicForm = reactive({
      systemName: '教育共享平台',
      logo: '',
      description: '让知识触手可及',
      icp: '京ICP备xxxxxxxx号'
    })
    const basicRules = {
      systemName: [
        { required: true, message: '请输入系统名称', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '请输入系统描述', trigger: 'blur' }
      ]
    }
    
    // 邮件设置表单
    const emailFormRef = ref(null)
    const emailForm = reactive({
      smtpServer: 'smtp.example.com',
      smtpPort: 465,
      senderEmail: 'noreply@example.com',
      senderName: '教育共享平台',
      password: ''
    })
    const emailRules = {
      smtpServer: [
        { required: true, message: '请输入SMTP服务器地址', trigger: 'blur' }
      ],
      smtpPort: [
        { required: true, message: '请输入SMTP端口', trigger: 'blur' }
      ],
      senderEmail: [
        { required: true, message: '请输入发件人邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ],
      senderName: [
        { required: true, message: '请输入发件人名称', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入邮箱密码', trigger: 'blur' }
      ]
    }
    
    // 支付设置表单
    const paymentFormRef = ref(null)
    const paymentForm = reactive({
      alipayEnabled: true,
      alipayAppId: '',
      alipayPrivateKey: '',
      alipayPublicKey: '',
      wechatEnabled: true,
      wechatMchId: '',
      wechatMchKey: '',
      wechatAppId: ''
    })
    const paymentRules = {
      alipayAppId: [
        { required: true, message: '请输入支付宝AppID', trigger: 'blur' }
      ],
      alipayPrivateKey: [
        { required: true, message: '请输入支付宝私钥', trigger: 'blur' }
      ],
      alipayPublicKey: [
        { required: true, message: '请输入支付宝公钥', trigger: 'blur' }
      ],
      wechatMchId: [
        { required: true, message: '请输入微信商户号', trigger: 'blur' }
      ],
      wechatMchKey: [
        { required: true, message: '请输入微信商户密钥', trigger: 'blur' }
      ],
      wechatAppId: [
        { required: true, message: '请输入微信AppID', trigger: 'blur' }
      ]
    }
    
    // 其他设置表单
    const otherFormRef = ref(null)
    const otherForm = reactive({
      enableRegister: true,
      enableComment: true,
      maintenanceMode: false,
      maintenanceMessage: ''
    })
    
    // Logo上传相关方法
    const handleLogoSuccess = (res, file) => {
      basicForm.logo = URL.createObjectURL(file.raw)
    }
    
    const beforeLogoUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        ElMessage.error('Logo必须是图片文件!')
      }
      if (!isLt2M) {
        ElMessage.error('Logo大小不能超过 2MB!')
      }

      return isImage && isLt2M
    }
    
    // 表单提交方法
    const handleBasicSubmit = async () => {
      if (!basicFormRef.value) return
      
      try {
        await basicFormRef.value.validate()
        // 实现保存逻辑
        ElMessage.success('基本设置保存成功')
      } catch (error) {
        console.error('表单验证失败:', error)
      }
    }
    
    const handleEmailSubmit = async () => {
      if (!emailFormRef.value) return
      
      try {
        await emailFormRef.value.validate()
        // 实现保存逻辑
        ElMessage.success('邮件设置保存成功')
      } catch (error) {
        console.error('表单验证失败:', error)
      }
    }
    
    const handleTestEmail = () => {
      // 实现发送测试邮件逻辑
      ElMessage.success('测试邮件发送成功')
    }
    
    const handlePaymentSubmit = async () => {
      if (!paymentFormRef.value) return
      
      try {
        await paymentFormRef.value.validate()
        // 实现保存逻辑
        ElMessage.success('支付设置保存成功')
      } catch (error) {
        console.error('表单验证失败:', error)
      }
    }
    
    const handleOtherSubmit = () => {
      // 实现保存逻辑
      ElMessage.success('其他设置保存成功')
    }
    
    return {
      activeTab,
      basicFormRef,
      basicForm,
      basicRules,
      emailFormRef,
      emailForm,
      emailRules,
      paymentFormRef,
      paymentForm,
      paymentRules,
      otherFormRef,
      otherForm,
      handleLogoSuccess,
      beforeLogoUpload,
      handleBasicSubmit,
      handleEmailSubmit,
      handleTestEmail,
      handlePaymentSubmit,
      handleOtherSubmit
    }
  }
}
</script>

<style scoped>
.settings-management {
  padding: 20px;
}

.logo-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.logo-uploader:hover {
  border-color: #409eff;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: contain;
}

.payment-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-form-item) {
  margin-bottom: 22px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

:deep(.el-card__header) {
  padding: 12px 20px;
}
</style> 